<template>
  <div class="container">
    <el-card>
      <el-row class="top" >
        <el-form ref="formCIty" :model="formCIty" label-width="80px" :inline="true">
          <el-col :span="6">
        <el-form-item label="标签名称" placeholder="请输入">
          <el-input v-model="formCIty.tags"></el-input>
        </el-form-item>
        </el-col>
         <el-col :span="6">
        <el-form-item label="城市" >
          <el-select v-model="formCIty.province" placeholder="请选择" @change="chooseCity">
            <el-option v-for="(item,index) in allProvinces" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="地区" >
          <el-select v-model="formCIty.city" placeholder="请选择" >
            <el-option default-first-option v-for="(item ,index) in allCity" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
         </el-col>
         <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input v-model="formCIty.shortName"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="状态">
          <el-select v-model="formCIty.state" placeholder="请选择">
            <el-option  label="启用" :value="1"></el-option>
            <el-option  label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item>
          <el-button @click="handelDel">清除</el-button>
          <el-button type="primary" @click="handerSearch">搜索</el-button>
        </el-form-item>
        </el-col>
      </el-form>

       <el-col :span="12" class="add">
        <el-button style="text-align: right;margin-bottom: 20px" type="success" @click="handelAdd">
        <i class="el-icon-edit"></i>
        新增用户
      </el-button>
      </el-col >
      </el-row>
       <el-alert
          :closable="false"
           show-icon
          type="info"
          :title="`数据一共${counts}条`"
          >
        </el-alert>
        <el-table
           v-loading="loading"
            :data="tableData"
            style="width: 100%; padding: 0 10px">
            <el-table-column
              type="index"
              label="序号"
              width="136">
            </el-table-column>
            <el-table-column
              prop="number"
              label="企业编号"
              width="136">
            </el-table-column>
            <el-table-column
              prop="shortName"
              label="企业简称"
              width="136"
              >
            </el-table-column>
            <el-table-column
              prop="tags"
              label="标签"
              width="136">
            </el-table-column>
            <el-table-column
              prop="creatorID"
              label="创建者"
              width="136">
            </el-table-column>
               <el-table-column
              prop="addDate"
              label="创建日期"
              width="136">
            </el-table-column>
              <el-table-column
              prop="remarks"
              label="备注"
              width="136">
            </el-table-column>
               <el-table-column
              label="状态"
              width="136">
              <template slot-scope="{row}">
                  {{ row.state |changeState}}
              </template>
            </el-table-column>
              <el-table-column
              label="操作"
              width="180">
              <template slot-scope="{row}">
                <el-button @click="edit(row)" plain type="primary" icon="el-icon-edit" circle></el-button>
              <el-button @click="close(row)" plain type="success" :icon="row.state === 1 ? 'el-icon-close' : 'el-icon-check'" circle></el-button>
              <el-button @click="delet(row)" plain type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
        </el-table>
         <!-- 分页 -->
          <el-pagination
          style="text-align: right;margin-top: 20px;"
          background
          @size-change="getcompanysList"
          @current-change="getcompanysList"
          :current-page.sync="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size.sync="page.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts">
    </el-pagination>
    <!-- 新增弹层 -->
    <companysAdd ref="companysAdd" :titleInfo="titleInfo" :formBase="formBase" @newDataes="newDataes"
    @clear="clearDate" @newDataes1="newDataes1"
    ></companysAdd>

    </el-card>
  </div>
</template>

<script>
import { list, disabled, remove } from '@/api/hmmm/companys'
// 获得所有城市，地区
import { provinces, citys } from '@/api/hmmm/citys'
import companysAdd from '../components/companys-add.vue'
export default {
  data () {
    return {
      page: {
        page: 1,
        pagesize: 10
      },
      formCIty: {
        city: ''
      },
      tableData: [],
      allProvinces: [],
      allCity: [],
      loading: false,
      counts: 0,
      titleInfo: {
        text: '',
        pageTitle: ''
      },
      formBase: {
        shortName: '',
        isFamous: false,
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
    }
  },
  components: {
    companysAdd
  },
  filters: {
    changeState (value) {
      if (value === 1) {
        return '启用'
      } else if (value === 0) {
        return '禁用'
      }
    }
  },
  created () {
    this.getcompanysList()
    this.getAllProvinces()
  },

  methods: {
    async getcompanysList () {
      const { data } = await list(this.page)
      this.tableData = data.items
      this.counts = data.counts
    },
    async getAllProvinces () {
      // 获得所有城市
      const res = await provinces()
      // console.log(res)
      this.allProvinces = res
    },
    async chooseCity () {
      // 获得所有地级城市
      const res = await citys(this.formCIty.province)
      // console.log(res)

      this.allCity = res
      this.formCIty.city = this.allCity[0]
    },
    async handerSearch () {
      // 搜索
      const { data } = await list(this.formCIty)
      this.tableData = data.items
      this.counts = data.counts
    },
    handelDel () {
      // 清除搜素内容
      this.formCIty = {}
    },
    handelAdd () {
      this.$refs.companysAdd.dialogFormVisible = true
      // 新增用户
      this.titleInfo = {
        text: '创建用户',
        pageTitle: ''
      }
    },
    newDataes (Date) {
      // 添加
      this.formBase = { ...Date }
      // 更新视图
      this.getcompanysList()
    },
    clearDate () {
      // 清除文本框
      this.formBase = {
        shortName: '',
        isFamous: false,
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
    },
    edit (row) {
      // 修改
      this.$refs.companysAdd.dialogFormVisible = true
      this.formBase = { ...row }
    },
    newDataes1 (Date1) {
      this.formBase = { ...Date1 }
      // 更新视图
      this.getcompanysList()
    },
    close (row) {
      // 禁用
      // 1调用更新状态接口

      this.$confirm('已成功启用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (row.state === 1) {
          row.state = 0
        } else if (row.state === 0) {
          row.state = 1
        }
        await disabled(row)
        // 2更新视图
        this.getcompanysList()
        this.$message({
          type: 'success',
          message: '已成功启用!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作！'
        })
      })
    },
    delet (row) {
      // 删除数据
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        // 2更新视图
        this.getcompanysList()
        this.$message({
          type: 'success',
          message: '成功删除了用户!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作！'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
}
.top {
  height: 120px;
}
 ::v-deep .add {

    width: 50%;
    text-align: right;

}
</style>
